import 'package:flutter/material.dart';

// MediaQuery.of(context).size; 获取屏幕尺寸

// Positioned 定位组件
// 定位组件必须要在 Stack 组件中使用
// 定位组件的属性：
// left、top、right、bottom、     width、height 子元素宽高
// 定位组件的属性值可以是具体的数值，也可以是相对于父容器的比例值
// 定位组件的属性值可以是负数，负数表示向相反方向定位

// stack 组件的属性：
// alignment：子元素对齐方式
// children：子元素列表

// align 子元素对齐方式
// Alignment.center：居中对齐
// Alignment.topCenter：顶部居中对齐
// Alignment.bottomCenter：底部居中对齐
// Alignment.centerLeft：左侧居中对齐
// Alignment.centerRight：右侧居中对齐


class StackDome extends StatefulWidget {
  const StackDome({super.key});

  @override
    State<StackDome> createState() => _StackDomeState();
}

class _StackDomeState extends State<StackDome> {
  int _currentIndex = 0;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('stack'),
        ),
        body: Column(
          children: [
            Row(
              children: [
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      _currentIndex = 0;
                    });
                  },
                  child: Text('stack'),
                ),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      _currentIndex = 1;
                    });
                  },
                  child: Text('stack1'),
                ),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      _currentIndex = 2;
                    });
                  },
                  child: Text('Positioned'),
                ),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      _currentIndex = 3;
                    });
                  },
                  child: Text('align'),
                ),
              ],
            ),
            _currentIndex == 0 ? Stack1() : _currentIndex == 1 ? Stack2() : _currentIndex == 2 ? Stack3() : Align1()
          ],
        ),    
      );
  }
}

class Stack1 extends StatelessWidget {
  const Stack1({super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.bottomRight,
      children: [
        Container(
          width: 200,
          height: 200,
          color: Colors.red,
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.green,
        ),
      ],
    );
  }
}

class Stack2 extends StatelessWidget {
  const Stack2({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 300,
      color: Colors.red,
      child: Stack( // 相对于外部容器进行定位，没有外部容器则相对于整个屏幕
        children: [
          Positioned(
            left: 10,
            top: 10,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.green,
            ),
          ),
          Positioned(
            right: 0,
            bottom: 10,
            child: Text('data', style: TextStyle(fontSize: 20, color: Colors.white)),
          ),
        ],
      ),
    );
  }
}

class Stack3 extends StatelessWidget {
  const Stack3({super.key});

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Stack(
      children: [
        SizedBox(
          height: 500,
          child: ListView(
            padding: EdgeInsets.fromLTRB(0, 50, 0, 0),
            children: [
              ListTile(title: Text(' list 列表'),),
              ListTile(title: Text(' list 列表'),),
              ListTile(title: Text(' list 列表'),),
              ListTile(title: Text(' list 列表'),),
              ListTile(title: Text(' list 列表'),),
              ListTile(title: Text(' list 列表'),),
              ListTile(title: Text(' list 列表'),),
              ListTile(title: Text(' list 列表'),),
              ListTile(title: Text(' list 列表'),),
              ListTile(title: Text(' list 列表'),),
              ListTile(title: Text(' list 列表'),),
              ListTile(title: Text(' list 列表'),),
              ListTile(title: Text(' list 列表'),),
            ],
          ),
        ),
        Row(
          children: [
            Expanded(
              flex: 1,
              child: Container(
                height: 50,
                alignment: Alignment.center,
                color: Colors.blue,
                child: Text('二级导航', style: TextStyle(fontSize: 20, color: Colors.white)),
              ),
            ),
          ],
        ),
        Positioned(
          left: 0,
          bottom:0,
          width: size.width, 
          height: 44,
          child: Container(
                // height: 50,
                alignment: Alignment.center,
                color: Colors.deepOrange,
                child: Text('二级导航-Positioned', style: TextStyle(fontSize: 20, color: Colors.white)),
              ),
          ),
      ],
    );
  }
}

class Align1 extends StatelessWidget {
  const Align1({super.key});

  @override
  Widget build(BuildContext context) {

    // Alignment(x,y) 算法
    // x: -1 左对齐 0 居中 1 右对齐     Alignment.x*childWidth/2+childWidth/2
    // y: -1 顶部对齐 0 居中 1 底部对齐  Alignment.y*childHeight/2+childHeight/2
    return Container(
      width: 100,
      height: 100,
      color: Colors.purple,
      child: Align(
        alignment: Alignment(-0.5,0.5),
        child: Text('align', style: TextStyle(fontSize: 20, color: Colors.white)),
      ),
    );
  }
}